<template>
  <el-container>

    {{this.$route.params.userId}}<br/>
    {{this.$route.params.pid}}<br/>
    {{this.$route.params.count}}

    <el-header height="60px">
      <el-col :span="12"><div class="grid-content bg-purple" align="left">
        <img src="../assets/logo.png" width="150px" height="50px">
      </div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light" align="right">
        <el-button plain>登录</el-button>
        <el-button plain>注册</el-button>
      </div></el-col>
    </el-header>
    <el-main>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="pname"
          label="商品名称"
          width="420">

        </el-table-column>
        <el-table-column
          prop="price"
          label="商品价格"
          width="120">
        </el-table-column>
        <el-table-column
          prop="pcount"
          label="商品数量"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>


    </el-main>
  </el-container>

</template>

<script>
export default {
    name: "Cart",
  data() {
    return {
      tableData: [{
        pname: 'HUAWEI P30',
        price: '6778',
        pcount: 2
      }, {
        pname: 'IPHONE X',
        price: '5778',
        pcount: 3
      },{
        pname: 'NOTE3',
        price: '3778',
        pcount: 1
      }],
      multipleSelection: []
    }
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped>

  .el-header, .el-footer {
    margin-top: 10px;
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-carousel__item h3{
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }



  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /*line-height: 560px;*/
    /*height: 800px;*/
    padding:10px 0px 50px 0px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }





</style>
